import QtQuick 2.0
import QtQuick.Controls 2.14

Rectangle {
    id: container
    height: 60
    width: parent.width
    color: "#EDEDED"
    signal send(string text)

    ScrollView {
        id: view
        width: container.width - 20
        height: container.height - 20
        anchors.centerIn: parent

        TextArea {
            id: area
            width: parent.width
            wrapMode: TextArea.Wrap
            placeholderText: qsTr("按回车发送,按CTRL+回车换行")
            color: "#0E0E0E"
            font.pixelSize: 14
            font.family: "Microsoft Yahei"
            verticalAlignment: TextArea.AlignTop

            // 加一个背景，好看一点
            background: Rectangle {
                 anchors.fill: parent
                 border.color: container.state == "open" ? "#E0E0E0" : "transparent"
                 color: "#FFFFFF"
                 radius: 4
            }

            // 鼠标移上来的时候，高度增加
            onHoveredChanged: {
                container.state = hovered ? "open" : ""
            }

            // 按下回车发出信息
//            Keys.onReturnPressed: {
//                if (text.trim() !== "") {
//                    // Send message here
//                    console.log("Sending message:", text)
//                    text = ""
//                }
//            }
            // 按下回车发出信息
            Keys.onPressed: {
                // 当按下 Ctrl + Enter 的时候，换行，而不是发消息
                if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter ) && (event.modifiers & Qt.ControlModifier)) {
                    area.insert(area.cursorPosition, "\n")
                    event.accepted = true

                } else if ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter ) ) {
                    // 发出消息：
                    send(area.text)
                    container.state = ""
                    area.text = ""
                    event.accepted = true
                } else
                    // 只要有输入，就把输入框拉大
                   container.state = "open"

            }
        }
    }

    states: State {
        name: "open"
        PropertyChanges { target: container; height: 200 }
    }
}
